<template>
  <div style="text-align: center">
    <slide-verify
      ref="block"
      slider-text="向右滑动"
      :imgs="[img1, img2, img3, img4, img5, img6]"
      @again="onAgain"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
    ></slide-verify>
    <div style="display: flex; align-items: center; justify-content: center">
      {{ msg }}
      <span v-if="success" style="margin-left: 15px">
        <el-icon class="is-loading"><Loading /></el-icon> 登录中...
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineExpose } from 'vue'
// 局部注册组件，需要单独引用组件样式
// 只提供局部引用的方式，不再采用插件形式，方便按需加载，减少主包大小
import SlideVerify from './index'
import type { SlideVerifyInstance } from './index.d'
import { Loading } from '@element-plus/icons-vue'
import { useTimeoutFn } from '@vueuse/core'
import img1 from '@/assets/images/verify/1.png'
import img2 from '@/assets/images/verify/2.png'
import img3 from '@/assets/images/verify/3.png'
import img4 from '@/assets/images/verify/4.png'
import img5 from '@/assets/images/verify/5.png'
import img6 from '@/assets/images/verify/6.png'
import './style.css'

const emits = defineEmits(['success'])

const success = ref(false)
const msg = ref('')
const block = ref<SlideVerifyInstance>()

const onAgain = () => {
  msg.value = '检测到非人为操作,请重试'
  useTimeoutFn(() => {
    block.value?.refresh()
  }, 1500)
}

const onSuccess = (times: number) => {
  msg.value = `验证通过, 耗时${(times / 1000).toFixed(1)}s`
  success.value = true
  emits('success')
  // useTimeoutFn(() => {
  // }, 100)
}

const onFail = () => {
  msg.value = '验证不通过, 请重试'
  useTimeoutFn(() => {
    block.value?.refresh()
  }, 1500)
}

const onRefresh = () => {
  msg.value = ''
  success.value = false
}

const refresh = () => {
  msg.value = ''
  block.value?.refresh()
}

defineExpose({ refresh })
</script>
